/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 2020年9月26日, 上午11:06:16
    Author     : Admin
*/
 
html, body {
    margin:0;
    padding: 0;
    width:100%;
    height: 100%;
} 

.frame {
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .title-bar {
        background: #29a0f5;
        color:white;
        width:100%;
        display: flex;
        align-items: center;
        justify-content: center;

        h1 {
            height:25px;
            padding:3px 5px;
            -webkit-app-region: drag;
            box-sizing: border-box;
            font-size: 14px;
            font-weight: bold;
            margin:0;
            flex:1;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }

        .close-btn {
            font-size:20px;
            display:flex;
            align-items: center;
            justify-content: center;
            padding: 5px 15px;
            box-sizing: border-box;
            cursor: default;
            height: 30px;
            font-size:25px;
            line-height: 30px;

            &:hover {
                background: #bf0000;
                color:white;
            }
        }
    }
}

.content {
    width:100%;
    height: 100%;
    display: flex;
    position: relative;

    .left-bar {
        height:100%;
        width:120px;
        border-right:solid 1px #b5b3b3;
        background: #e5e5e5;
        /*padding-top: 10px;*/

        .left-bar-item {
            padding: 8px 4px;
            background: #e5e5e5;
            color: black;
            font-size:13px;
            cursor:default;

            transition: all .2s;
            width: calc(100% + 1px);
            box-sizing: border-box;

            border-top: solid 1px #e5e5e5;
            border-bottom: solid 1px #e5e5e5;
            border-right: solid 1px #b5b3b3;
        }

        .left-bar-item.actived:first-child {
            border-top: solid 1px white;
        }

        .left-bar-item.actived {
            background: white;
            border-right-color: white;
            color: black;

            border-top: solid 1px #b5b3b3;
            border-bottom: solid 1px #b5b3b3;
            font-weight: bold;
        }
    }

    /*右侧内容*/
    .right-content {
        display: flex;
        flex-direction: column;
        flex:1;

        .content-body {
            flex: 1;
        }

        .button-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            padding:10px 10px;
            border-top:solid 1px #ddd;

            button.save {
                padding-left:20px;
                padding-right:20px;
            }
        }
    }

}


.content-group {
    padding:5px;
    margin-bottom: 15px;

    &:last-child {
        margin-bottom: 0;
    }

    h1 {
        margin:0;
        padding:6px;
        font-size:16px;
        margin-bottom:6px;
        border-bottom: solid 2px #f4f4f4;
    }

    .group-body {
        font-size:14px;

        .line {
            padding: 5px;
            display:flex;
            justify-content: flex-start;
            align-items: center;

            label {
                display:flex;
                justify-content: flex-start;
                align-items: center;

                span {
                    margin-right:5px;
                    display: inline-block;
                    width: 120px;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    text-align: right;
                }
            }

            input[type=checkbox] {
                margin:0;
                width:16px;
                height:16px;
            }
        }
    }
}

table.directories {
    width:100%;
    border:none;
    border-collapse: collapse;
    tr {
        background: #f9f9f9;
    }

    tr:nth-child(odd) {
        background: #f0f0f0;
    }

    td {
        border:solid 1px #ebebeb;
        padding: 3px;

        .val-col {
            padding: 3px 0;
            
            .col-left {
                width: 50px;
                text-align: right;
                color: black;
                font-weight: bold;

                &::after {
                    content:': ';
                }
            }
            
            .col-right {
                color:gray;
                
                &.path {
                    color: #9d1ed2;
                }
            }
        }
        
        
        .smblock {
            display: inline-block;
            padding: 2px 5px;
            border-radius: 6px;
            background: gray;
            font-size: 12px;
            margin-right: 3px;
            
            &.allow {
                background:lightblue;
            }
            
            &.ignore {
                background: pink;
            }
        }
    }

    td.opera {
        width: 1px;
        white-space: nowrap;
        padding:3px 5px;
        text-align: right;
    }

    td .edit-input {
        width:100%;
        height:100%;
        box-sizing: border-box;
    }
}

.dlg-add-directory {
    font-size: 13px;

    .body {
        table {
            textarea {
                box-sizing: border-box;
                height: 50px;
                width: 100%;
                font-family: "微软雅黑", "黑体", serif;
            }

            select {
                box-sizing: border-box;
                width:100%;
                height:30px;
            }
        }
    }
    
    .helper-btn {
        cursor:help !important;
    }
}

.loading-img {
    width:20px;
    animation:rotate 1.5s infinite linear;
}

@keyframes rotate {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}